<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-6 vm.$props</title>
</head>
<body>
<div id="app">
    <test-parent></test-parent>
</div>
<template id="parent">
    <div>
        <h3>phone information search</h3>
        phone brand: <input type="text" v-model="brand">
        <test-child :name="brand"></test-child>
    </div>
</template>
<template id="child">
    <ul>
        <li>phone brand: {{show.brand}}</li>
        <li>phone type: {{show.type}}</li>
        <li>market price: {{show.price}}</li>
    </ul>
</template>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('test-parent',{
        template:'#parent',
        data(){
            return{
                brand:''
            }
        }
    })
    Vue.component('test-child',{
        template:'#child',
        data() {
            return {
                content:[
                    {brand:"HUAWEI",type:'Mate20',price:3699},
                    {brand: "PINGGUO",type: "iPhone7",price:2949}
                ],
                show:{brand:'',type:'',price:''}
            }
        },
        props:['name'],
        watch:{
            name(){
                if (this.$props.name) {
                    var found = false;
                    this.content.forEach((value) => {
                        if (value.brand === this.$props.name) {
                            found = value
                        }
                    });
                    this.show = found ? found : {brand: '', type: '', price: ''};
                } else {
                    return
                }
            }
        }
    })
    new Vue({
        el: "#app",
        data:{}
    })
</script>
</html>